<template>
    <div style="height:calc(100% - 60px);">
        <a-layout-content v-show="!showDetail">
            <div class="layoutContentTitle">
                <span class="title">全部文件</span>
                <span class="btns">
                    <a-button>认领</a-button>
                    <!-- <a-button icon="ellipsis"></a-button> -->
                    
                    <a-dropdown placement="bottomRight">
                        <a-button icon="ellipsis"></a-button>
                        <a-menu slot="overlay">
                        <a-menu-item>查看</a-menu-item>
                        <a-menu-item @click="delectImg">删除</a-menu-item>
                        </a-menu>
                    </a-dropdown>
                    <a-button icon="qrcode"></a-button>
                </span>
            </div>
            <img-content-list ref="imgContentList" @func="imgStatusCahnge"></img-content-list>
        </a-layout-content>
        <img-detail ref="imgDetail" v-show="showDetail" @func="showImgList"></img-detail>
    </div>
</template>
<script>
import imgContentList from "./component/imgConetentList"
import imgDetail from "./component/imgDetail"
export default {
    name:"imageList",
    components:{imgContentList,imgDetail},
    data(){
        return{
            showDetail:false,
            listData:[],
            detailIndex:0,
        }
    },
    methods:{
        delectImg(){
            this.$confirm({
                title: '确认要删除所选项吗？',
                content: '删除后无法恢复',
                okText:"删除",
                cancelText:"取消",
                icon:"exclamation-circle",
                onOk(){
                    console.log("删除成功");
                }
            });
        },
        imgStatusCahnge(index){
            this.showDetail = true;
            this.listData = this.$refs.imgContentList.data;
            this.detailIndex = index;
            this.$refs.imgDetail.getDetailData(this.listData,index);
            console.log("listData:"+this.listData);
            console.log("emitindex:"+index);
        },
        showImgList(){
            this.showDetail = false;
        }
    }
}
</script>
<style lang="less">
.ant-layout-content{
    background: #f9f9f9;

}
.layoutContentTitle{
    padding:16px;
}
.layoutContentTitle .btns{
    float: right;
}
.layoutContentTitle .btns button{
    margin-left: 12px;
}
.layoutContentTitle .title{
    font-size: 16px;
}
.leftOperation i{
    font-size: 26px;
    margin-right: 13px;
    vertical-align: middle;
}
.leftOperation a{
    color:#000;
    line-height: 60px;
    font-size: 18px;
}
.leftOperation{
    float: left;
}
.rightOperation{
    float: right;
}
.rightOperation i{
    color:#000;
    font-size: 16px;
    margin-left:20px;
    line-height: 60px;
}

</style>